<template>
  <div class="chart-container">
    <!-- <el-button-group class="tabchange">
      <el-button type="text" size="mini" class="tabtext1">城市</el-button>
      <el-button type="text" size="mini" class="tabtext2">县级</el-button>
    </el-button-group> -->
    <!-- <span @click="tabFunc(index)" v-for="(iden, index) in idens" :class="curIndex == index ? 'active' : ''" class="tabtext">{{iden}}</span> -->
    <div class="right-bottom-map com_echarts" id="right-bottom-map">
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import echartsrender from '../../../assets/js/jquery.echarts';
  export default {
    name: 'right-bottom-map',
    data () {
      return {
        id:"right-bottom-map",
        // idens:['城市','县级'],
        // curIndex: 0
      }
    },
    created () {

    },
    mounted(){
      this.initMap();
    },
    methods:{
      initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));

        var _datamax = [100,100,100,100,100,100,100,100],
          _data1 = [10,15,15,15,15,25,30,15],
          _data2 = [20,5,30,35,15,35,10,15],
          _data3 = [25,35,15,25,10,15,25,10],
          _data4 = [25,25,25,15,30,15,15,30],
          _data5 = [20,20,15,10,30,10,20,30];
        var args = {
          title:'医药费用构成',
          legend_data:['药品量', '卫生材料', '化验检查费','技术劳务费','其他'],
          yAxis_data:['8月', '7月', '6月', '5月', '4月', '3月', '2月', '1月'],
          series:[{
            type: 'bar',
            name: '药品量',
            stack: '2',
            barCategoryGap:'50%',
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: '#30B8E8'
              }
            },
            data: _data1
          }, {
            type: 'bar',
            name: '卫生材料',
            stack: '2',
            barCategoryGap:'50%',
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: '#6DDABD'
              }
            },
            data: _data2
          }, {
            type: 'bar',
            stack: '2',
            barCategoryGap:'50%',
            name: '化验检查费',
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: '#F6B71E'
              }
            },
            data: _data3
          }, {
            type: 'bar',
            stack: '2',
            barCategoryGap:'50%',
            name: '技术劳务费',
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: '#F67901'
              }
            },
            data: _data4
          }, 
          {
            type: 'bar',
            stack: '2',
            barCategoryGap:'50%',
            name: '其他',
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: '#031f49'
              }
            },
            data: _data5
          }
          ]
        };
        var option = echartsrender.hxbar(args);
        myChart.setOption(option);
      }

    }
  }
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
  .com_echarts{
    width:100%;
    height:100%;
  }
  .right-bottom-map{
    height: 29vh;
  }
</style>
